<template>
  <div class="goodsinfo_content">
    <div class="title">
      <el-button type="danger" @click="infoReturn">返回</el-button>
    </div>

    <div class="content">
      <h2>商品信息</h2>
      <el-row>
        <el-col :span="12">
          <el-form
            label-position="left"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属分类" prop="Classification">
              <el-input v-model="ruleForm.Classification"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌" prop="brand">
              <el-input v-model="ruleForm.brand"></el-input>
            </el-form-item>
            <el-form-item label="销售单位" prop="saleCompany">
              <el-input v-model="ruleForm.saleCompany"></el-input>
            </el-form-item>
            <el-form-item label="商品规格" prop="Specifications">
              <el-input v-model="ruleForm.Specifications"></el-input>
            </el-form-item>
            <el-form-item label="规格条码" prop="SpecificationsBar">
              <el-input v-model="ruleForm.SpecificationsBar"></el-input>
            </el-form-item>
            <el-form-item label="起批数量" prop="wholesaleNum">
              <el-input v-model.number="ruleForm.wholesaleNum"></el-input>
            </el-form-item>
            <el-form-item label="供货商" prop="supplier">
              <el-input v-model="ruleForm.supplier"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      ruleForm: {
        name: "", //商品名称
        Classification: "", //所属分类
        brand: "", //商品品牌
        saleCompany: "", //销售单位
        Specifications: "", //商品规格
        SpecificationsBar: "", //规格条码
        wholesaleNum: "", //起批数量
        supplier: "" //供货商
      },
      rules: {
        name: [{ required: true, message: "请填写商品名称", trigger: "blur" }],
        Classification: [
          { required: true, message: "请填写所属分类", trigger: "blur" }
        ],
        brand: [{ required: true, message: "请填写商品品牌", trigger: "blur" }],
        saleCompany: [
          { required: true, message: "请填写销售单位", trigger: "blur" }
        ],
        Specifications: [
          { required: true, message: "请填写商品规格", trigger: "blur" }
        ],
        SpecificationsBar: [
          { required: true, message: "请填写规格条码", trigger: "blur" }
        ],
        wholesaleNum:[
          { required: true, message: "请填写起批数量", trigger: "blur" },
          {type:'number', message: "请填写数字类型",trigger: "blur" }
        ],
        supplier: [{ required: true, message: "请填写供货商", trigger: "blur" }]
      }
    };
  },
  methods: {
    infoReturn() {
      // 点击后退
      this.$router.go(-1);
    },
    submitForm(formName) {
      //确认
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      //重置
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.goodsinfo_content {
  background: #fff;
  padding: 10px;
  .title {
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .content {
    margin-top: 20px;
    h2 {
      text-align: left;
      padding: 10px;
      padding-left: 20px;
    }
    .el-col {
      float: none;
      margin: 0 auto;
    }
    .el-form {
      .el-form-item {
        margin-bottom: 30px;
      }
    }
  }
}
</style>